import {gsap} from 'gsap';

const sizeState = {
  "BIG": "big",
  "SMALL": "small"
}


class Navbar {
  sizeState = undefined

  constructor() {
    this.sizeState = sizeState.BIG;
  }

  adjust () {
    let currenState = window.innerWidth > 800 ? sizeState.BIG : sizeState.SMALL;

    if(this.sizeState !== currenState){
      this.sizeState = currenState;
      this.navbarAdjust();
    }
  }
}

navbarAdjust = () => {
  switch(this.sizeState){
    case sizeState.SMALL:
      this.nvvBemconSmall()
      break
    case sizeState.BIG:
      this.nvvBemconBig()
      break
    default:
      break
  }

  nvvBemconSmall = () => {
    const tween = gsap.timeline()
    tween.to('.header-structure nav', {duration: 0.6, ease: "power2", opacity: 0, x: 300, display: "none"})
    tween.to('header .log', {duration: 0.3, opacity: 1, display: "flex"})
  }


  nvvBemconBig = () => {
    const tween = gsap.timeline()
    tween.to('header .log', {duration: 0.6, opacity: 0, display: "none"})
    tween.to('.header-structure nav', {duration: 0.3, ease: "power2.out", opacity: 1, x: 0, display: "flex"})
  }
}


const navbar = new Navbar();
export {navbar}